<template>
	<view class="smart-page">
		<view class="smart-page-head">
			<view class="smart-page-head-litle">input输入控件</view>
		</view>
		<view>
			<view class="litle">普通选择器</view>
			<view class="item">
				<view class="item-title">当前选择</view>
				<view class="item-picker">
					<picker @change="bindPickerChange" mode="selector" :range="array" rarray-key="cname">
						{{array[index].cname}}
					</picker>
				</view>
			</view>
		</view>
		<view>
			<view class="litle">日期选择器</view>
			<view class="item">
				<view class="item-title">当前选择</view>
				<view class="item-picker">
					<picker @change="bindPickerChange" mode="data" >
						{{choiceDate}}
					</picker>
				</view>
			</view>
		</view>
		<view>
			<view class="litle">时间选择器</view>
			<view class="item">
				<view class="item-title">当前选择</view>
				<view class="item-picker">
					<picker @change="bindPickerChange" mode="time">
						{{time}}
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				array: [
					{
						id:1,
						cname:'中国'
					},
					{
						id:2,
						cname:'美国'
					},
					{
						id:3,
						cname:'巴西'
					},
				]
			}
		},
		methods: {
			bindPickerChange: function(e){
				console.log(e.detail.value);
				this.index = e.detail.value;
			},
			bindDatePickerChange(e){
				this.choiceDate = e.detail.value;
			},
			bindTimePickerChange(e){
				this.time = e.detail.value;
			}
		}
	}
</script>

<style>
	.title {
			border-bottom: 1upx solid #C0C0C0;
			padding: 20upx 0;
		}
	
		.item {
			display: flex;
			border-bottom: 1upx solid #C0C0C0;
		}
	
		.item-title {
			padding: 20upx;
		}
	
		.item-picker {
			padding: 20upx 50upx;
		}
</style>